@import url('./iconfont/iconfont.css');
@import url('animate.css');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.App {
    main {
        height: calc(100vh - 60px);
    }

    footer {
        height: 60px;
        border-top: 1px solid #ccc;

        ul {
            display: flex;
            text-align: center;

            li {
                flex: 1;

                a {
                    display: flex;
                    height: 60px;
                    flex-direction: column;
                    justify-content: center;
                    font-size: 14px;

                    .icon {
                        font-size: 16px;
                    }

                    &.active {
                        background-color: yellow;
                        color: blue;
                    }
                }
            }
        }
    }

    .Banner {
        .swiper {
            overflow: hidden;

            img {
                width: 100%;
            }
        }
    }

    .List {
        overflow: hidden;
        .left {
            float: left;
            width: 100px;
            background-color: #eee;
            height: calc(100vh - 60px);

            li {
                text-align: center;
                height: 100px;
                line-height: 100px;

                &.active {
                    background-color: red;
                    color: #fff;
                }
            }
        }

        .right {
            float: left;
            height: calc(100vh - 60px);
            overflow: auto;
            width: calc(100% - 100px);

            .rightItem {
                height: 700px;
            }

            img {
                width: 160px;
            }
        }
    }

    .Alert1 {
        width: 100%;
        height: 100%;
        background-color: yellow;
        position: absolute;
        top: 0;
        left: 0;
    }

    .Alert2 {
        width: 100%;
        height: 50%;
        background-color: greenyellow;
        position: absolute;
        bottom: 0;
        span{
            border:1px solid #000;
            display: inline-block;
            margin: 10px;
            &.active{
                background-color: #f00;
                color: #fff;
            }
        }

    }

    
}